<template>
  <div>
    <div class="detail-header">
      <h3 style="color:#1990FE ">
        {{ workPointInfo.name }}

      </h3>
    </div>
    <!-- 表格部分 -->
    <div class="page">
      <el-row :gutter="10">
        <el-col :span="6">
          <!-- 边坡信息 -->
          <div class="detail-bp">
            <el-card shadow="always">
              <div slot="header" class="clearfix">
                <span style="font-size: 18px;color: #ffffff;font-family: YouSheBiaoTiHei;">概况信息</span>
              </div>
              <el-row :gutter="10" class="card_data" style="margin-bottom: 10px">
                <el-col :span="12">
                  <el-card shadow="always" style="height: 100px">
                    <div class='left-li-top'>
                      <el-row>
                        <el-col :span="8">
                          <p class='left-li-top-title'>
                            <img src='~@/assets/images/jiancedian.png'>
                          </p>
                        </el-col>
                        <el-col :span="16">
                          <p class='left-li-title-right' style="font-size: 1.55rem;text-align: center;margin-top: 20px">
                            <span>{{ onLinelist.offlineCount+onLinelist.onlineCount+onLinelist.notBindCount  }}</span>
                          </p>
                          <p class='left-li-top-title' style="margin-top: 20px">
                            监测点数量
                          </p>
                        </el-col>
                      </el-row>
                    </div>
                  </el-card>
                </el-col>
                <el-col :span="12">
                  <el-card shadow="always" style="height: 100px;">
                    <div class='left-li-top'>
                      <el-row>
                        <el-col :span="8">
                          <p class='left-li-top-title'>
                            <img src='~@/assets/images/warning.png'>
                          </p>
                        </el-col>
                        <el-col :span="16">
                          <p class='left-li-title-right' style="font-size: 1rem;text-align: center;margin-top: 20px">
                            <span>{{ fxWarningPointList.maxWarningLevelName }}</span>
                          </p>
                          <p class='left-li-top-title' style="margin-top: 30px">
                            最高预警等级
                          </p></el-col>
                      </el-row>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
              <el-row :gutter="10" class="card_data">
                <el-col :span="8">
                  <el-card shadow="always" style="height: 110px">
                    <div class='left-li-top'>
                      <el-row>
                        <el-col :span="6">
                          <p class='left-li-top-title'  style="height: 50px;line-height: 45px">
                            <img src='~@/assets/images/zaixian.png' style="vertical-align:center;width: 100%;">
                          </p>
                        </el-col>
                        <el-col :span="18">
                          <p class='left-li-title-right' style="font-size: 1.55rem;text-align: center;margin-top: 20px">
                            <span>{{ onLinelist.onlineCount }}</span>
                          </p>
                      </el-col>
                      </el-row>
                      <p class='left-li-top-title' style="margin-top: 20px">
                        在线监测点
                      </p>
                    </div>
                  </el-card>

                </el-col>
                <el-col :span="8">
                  <el-card shadow="always" style="height: 110px">
                    <div class='left-li-top'>
                      <el-row>
                        <el-col :span="6">
                          <p class='left-li-top-title' style="height: 50px;line-height: 45px">
                            <img src='~@/assets/images/lx.png' style="vertical-align:center;width: 100%;">
                          </p>
                        </el-col>
                        <el-col :span="18">
                          <p class='left-li-title-right' style="font-size: 1.55rem;text-align: center;margin-top: 20px">
                            <span>{{ onLinelist.offlineCount }}</span>
                          </p>
                      </el-col>
                      </el-row>
                      <p class='left-li-top-title' style="margin-top: 20px">
                        离线监测点
                      </p>
                    </div>
                  </el-card>
                </el-col>
                <el-col :span="8">
                  <el-card shadow="always" style="height: 110px">
                    <div class='left-li-top'>
                      <el-row>
                        <el-col :span="6">
                          <p class='left-li-top-title' style="height: 50px;line-height: 45px">
                            <img src='~@/assets/images/manglu.png' style="vertical-align:center;width: 100%;">
                          </p>
                        </el-col>
                        <el-col :span="18">
                          <p class='left-li-title-right' style="font-size: 1.55rem;text-align: center;margin-top: 20px">
                            <span>{{ onLinelist.notBindCount }}</span>
                          </p>
                       </el-col>
                      </el-row>
                      <p class='left-li-top-title' style="margin-top: 00px">
                        无设备监测点
                      </p>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </el-card>
            <el-card shadow="always" style="margin-top: 10px">
              <div slot="header" class="clearfix">
                <span style="font-size: 18px;color: #ffffff;font-family: YouSheBiaoTiHei;">工点信息</span>
              </div>
              <!-- 基本信息展示 -->
              <ul class="infoList">
                <!-- 基本信息展示 -->
                <ul class="infoList" >
                  <li v-for="(item, i) in leftInfoList" :key="i" v-show="item.show">
                    <span class="title" style="width: 20%">{{item.title}}</span>
                    <span class="content" style="color: #767676">{{item.value}}</span>
                  </li>
                  <li>
<!--               -->
                  </li>
                </ul>
                <ul class="infoList" >
                  <li v-for="(item, i) in rightInfoList" :key="i" v-show="item.show" >
                    <span class="title">{{item.title}}</span>
                    <span class="content">{{item.value}}</span>
                  </li>
                </ul>
              </ul>
              <el-carousel height="300px">
                <el-carousel-item v-for="(item,index) in infoPic" :key="item.url">
                  <el-image @click="_previewImg(index,infoPic)"
                            style="width: 100%; height: 100%;" :src="item.url">
                  </el-image>
                </el-carousel-item>
              </el-carousel>
            </el-card>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content">
            <el-card shadow="always">
              <div slot="header" class="clearfix">
                <span style="font-size: 18px;color: #ffffff;font-family: YouSheBiaoTiHei;">最新数据</span>
              </div>
              <!-- table -->
              <div class="page_main">
                <el-table
                  :data="tableList"
                  border
                  @row-click="clickData">
                  <el-table-column align="center" label="序号" fixed width="80">
                    <template slot-scope="scope">
                      {{ getIndex(scope.$index) }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="pointName"
                    align="center"
                    show-overflow-tooltip
                    label="监测点"
                    min-width="120">
                  </el-table-column>
                  <el-table-column
                    align="center"
                    prop="monitorTypeName"
                    show-overflow-tooltip
                    label="监测类型"
                    width="120">
                  </el-table-column>
                  <el-table-column
                    align="center"
                    prop="createTime"
                    label="数据采集时间"
                    width="175">
                    <template slot-scope="scope">
                      {{ scope.row.createTime | formatTimer() }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    align="center"
                    prop="recordValueName"
                    show-overflow-tooltip
                    label="数据"
                    min-width="140">
                  </el-table-column>
                  <el-table-column
                    align="center"
                    prop="warningLevelName"
                    label="预警等级"
                    width="120">
                    <template slot-scope="scope">
                      <el-button
                        size="mini"
                        :style="scope.row.warningLevel | gradeColor"
                        class="s-white">
                        {{ scope.row.warningLevelName }}
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-card>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content s-grade">
            <el-card shadow="always" style="height: 42vh;overflow: auto">
              <div slot="header" class="clearfix">
                <span style="font-size: 18px;color: #ffffff;font-family: YouSheBiaoTiHei;">分项预警等级</span>
              </div>
              <template v-if="fxWarningPointList.list">
                <el-card
                  class="grade-card"
                  shadow="always"
                  v-for="(item, index) in fxWarningPointList.list"
                  :key="index"
                  :style="item.warningLevel | gradeColor">
                  <i class="el-icon-s-operation"></i>
                  <span>{{ item.monitorTypeName }}</span>
                  <span>{{ item.warningLevelName }}</span>
                </el-card>
              </template>
              <template v-else>暂无预警数据...</template>
            </el-card>
          </div>
          <div class="grid-content">
            <el-card shadow="always">
              <div slot="header" class="clearfix">
                <span style="font-size: 18px;color: #ffffff;font-family: YouSheBiaoTiHei;">监测类型占比统计</span>
              </div>
              <div class="s-pie">
                <pie-charts ref="monitorPie"></pie-charts>
              </div>
            </el-card>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 饼图部分 -->
    <!-- 查看大图 -->
    <picture-viewer ref="imageViewer"></picture-viewer>
  </div>
</template>
<script>
import PieCharts from "./pie-charts/pie-charts.vue";
import PictureViewer from '@/components/picture-viewer/index-name'
import Format from "@/utils/format";
import {
  monitorChart,
  deviceOnlineStatus,
  queryRecentList,
  fxWarningList,
} from "@/services/model/open_iframe.js";
import constUrl from '@/services/env'
import {getLocalStorageItem} from "../../../utils/storage-helper";
import {actions, mutations, store} from "../../monitor/work-point.store";

export default {
  data() {
    return {
      constUrl,
      workPointInfo:[],
      onLinelist: "",
      form: {
        page: 1,
        pageSize: 17,
      },
      tableList: [],
      leftInfoList: [],
      rightInfoList:[],
      infoPic: [],
      workPointName: '',
      fxWarningPointList: "",
      showSlopeInfo: true
    };
  },
  components: {
    PieCharts,
    PictureViewer
  },
  filters: {
    // 时间格式化
    formatTimer(timer) {
      return Format(new Date(timer));
    },
    gradeColor(val) {
      switch (val) {
        case 2:
          return 'background-color:#0073b7;color:white'
        case 3:
          return 'background-color:#f39c12;color:white'
        case 4:
          return 'background-color:#ff851b;color:white'
        case 5:
          return 'background-color:#e43321;color:white'
        default:
          return 'background-color:#0DC26B;color:white'
      }
    },
  },
  watch: {

  },
  computed: {

    // 对象整理成列表展示
  },
  methods: {

    // 查看大图
    _previewImg(index, urls) {
      let urlsList = []
      urls.map(x => {
        let item = {}
        item.url =  x.url
        item.name = x.name
        urlsList.push(item)
      })
      // 显示照片查看器
      this.$refs.imageViewer.showViewer(urlsList, index)
    },
    // 获取当前的序号
    getIndex(index) {
      let param = (this.form.page - 1) * this.form.pageSize + index + 1;
      return param;
    },
    // 最新数据行点击
    clickData(row) {
      return
      // this.$router.push({
      //   // path: `/project/${row.projectId}/work-point/${row.workPointId}/monitor/${row.monitorType}?activeId=${row.pointId}`,
      // });
    },
    // 监测点占比
    async monitorChartList(val) {
      let res = await monitorChart(val);
      let list = res.data ? res.data : [];
      this.$refs.monitorPie.updateEchart(list, 1);
    },
    // 设备在线离线数
    async deviceOnlineList(val) {
      let res = await deviceOnlineStatus(val);
      this.onLinelist = res.data ? res.data : [];
    },

    // 分项预警
    async fxWarningList(val) {
      let res = await fxWarningList(val);
      this.fxWarningPointList = res.data ? res.data : [];
    },
    // 监测点信息
    async getWorkPointInfo(val) {
    let  info = val.data ? val.data : [];
    this.workPointInfo=info
      this.infoPic = info.picList?.map(x => ({...x, url: constUrl + x.url})) || []
      let showSlopeInfo = true
      if (!info.slopeInfo || !info.slopeInfo.slopeNo) {
        info.slopeInfo = {}
        showSlopeInfo = false
      }
      this.leftInfoList = [
        {title: "名称：", value: info.name || "-", show: true},
        {title: "边坡编号：", value: info.slopeInfo.slopeNo || "-", show: showSlopeInfo,},
        {title: "行政区：", value: info.area || "-", show: true},
        {
          title: '起止时间：',
          value: Format(new Date(info.startTime), 'yyyy年MM月dd日') + '~' + Format(new Date(info.endTime), 'yyyy年MM月dd日') || '-',
          show: true
        },
        {title: "起止桩号：", value: info.slopeInfo.startStoke + "~" + info.slopeInfo.endStoke || "-", show: showSlopeInfo,},
        {title: "经纬度：", value: info.longitude + "，" + info.latitude || "-", show: info.longitude},
      ]
      this.rightInfoList = [
        {title: "边坡高度：", value: info.slopeInfo.height + 'm' || "-", show: showSlopeInfo,},
        {title: "边坡长度：", value: info.slopeInfo.slopeLength + 'm' || "-", show: showSlopeInfo,},
        {title: "边坡位置：", value: info.slopeInfo.positionName || "-", show: showSlopeInfo,},
        {title: "边坡类型：", value: info.slopeInfo.slopeTypeName || "-", show: showSlopeInfo,},
        {title: "道路类型：", value: info.slopeInfo.slopeSlideTypeName || "-", show: showSlopeInfo,},
      ]
    },
    // 最新数据

    async queryList() {
      let reqData = {
        workPointId: this.$route.query.workPointId,
        // workPointId: this.$route.params.workPointId,
        pageSize: this.form.pageSize,
      };
      let res = await queryRecentList(reqData);
      this.tableList = res.data ? res.data : [];
    },
  },
  created() {
    this.queryList();
  },
  mounted() {
    this.fxWarningList({
      workPointId: this.$route.query.workPointId
      // workPointId: this.$route.params.workPointId
    });

    this.getWorkPointInfo({
      workPointId: this.$route.query.workPointId
      // workPointId: this.$route.params.workPointId,
    });
    this.deviceOnlineList({
      workPointId: this.$route.query.workPointId
      // workPointId: this.$route.params.workPointId,
    });
    this.monitorChartList({
      // workPointId: this.$route.params.workPointId,
      workPointId: this.$route.query.workPointId
    });
  },
  activated() {

    this.queryList();
  }
};
</script>

<style scoped="scoped" lang="less">
  .page {
    height: 85vh !important;
    padding: 20px;

    /deep/ .el-card__header {
      background-color: #1b1b1b;
      padding: 10px 15px;
    }
  }

  .page_main {
    padding: 0px !important;
  }

  .detail-bp {
    margin-bottom: 20px;

    .base_one {
      margin-bottom: 8px;
    }

    .base_one:hover {
      box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);

    }

    .infoList {
      li {
        display: flex;
        line-height: 18px;
        font-size: 14px;
        margin-bottom: 8px;

        .s-title {
          text-align: left;
          margin-right: 8px;
          color: #04a7b3;
          flex-shrink: 0;
          font-size: 14px;


          &::after {
            content: "：";
          }
        }

        .s-content {
          font-size: 13px;
          color: #515563;
        }
      }
    }
  }

  .el-row {
    margin-bottom: 20px;
    color: white !important;

    /deep/ .title {
      padding: 10px 0;
      text-align: right;

      // color: white !important;
    }

    /deep/ .content {
      padding: 8px !important;
    }

    &:last-child {
      margin-bottom: 0;
    }
  }

  .nav-header, .s-grade {
    margin-bottom: 20px;

    /deep/ .el-card {
      color: white !important;
    }

    /deep/ .el-card__body i,
    .el-card__body span {
      display: inline-block;
      vertical-align: middle;
    }


    .el-col span {
      margin-left: 15px;
      font-size: 16px;
      color: white !important;
    }

    .el-col i {
      font-size: 26px;
    }
  }

  .grade-card {
    color: #ffffff;
    margin-bottom: 8px;
    font-size: 14px;

    span {
      margin-left: 15px;
    }

    i {
      font-size: 18px !important;
    }
  }

  .page {
    /*background-color: #212d39 !important;*/
    height: 100%;
  }

  .s-pie {
    height: 300px;
    /*background: white;*/
  }

  /deep/ .el-table {
    td,
    th {
      padding: 5px !important;
    }
  }

  .s-white {
    color: #ffffff;
  }

  .always {
    span {
      color: white !important;
    }
  }

  .nav-header {
    /deep/ .el-card {
      .el-card__body {
        // background: red !important;
        span,
        i {
          color: white;
        }
      }
    }
  }

  .page {
    /deep/ .collapse {
      /*background: #1b1b1b;*/
      box-shadow: 0px 0px 4px black;

      /deep/ .title {
        color: white !important;
      }

      .text {
        color: white !important;
        color: rgb(194, 53, 49) !important;
        color: rgb(0, 179, 182) !important;
      }
    }
  }

  .nav-header {
    /deep/ .el-card {
      background: rgba(24,144,254, 1) !important;
      /*background: linear-gradient(to right, rgba(14,144,254, 0.6), rgba(14,144,254, 0.2), rgba(14,144,254, 0)) !important;*/
      /**/
    }
  }

  .left-li-title-right {
    font-size: 1.2rem;
    color: #5dfff6;
  }

  .left-li-top-title img {
    width: 3.0rem;

    vertical-align: bottom;
  }

  .left-li-top-title {
    text-align: center;
    color: #ffffff;
    font-size: 1rem;
  }

  .card_data .el-card {
    background-color: #1b1b1b;
  }
</style>
